<template>
    <div class="content">
        <template v-if="isHome">
            <div class="title">告别厅祭祀</div>
        </template>

        <template v-else>
            <div class="content-1">
                <!-- 照片 -->
                <div class="content-1-brief_introduction">生平照片</div>
                <div class="content-1-img-box">
                    <Transition>
                        <img 
                            :key="imgList[imgIndex]"
                            class="content-1-img" 
                            :src="imgList[imgIndex]" 
                            object-fit="fill"
                        />
                    </Transition>
                    
                </div>
            </div>
            <div class="content-2">
                <!-- 头像，简介 -->
                <div class="content-2-title">{{dataMsg.of_ex2}}同志一路走好</div>
                <div class="content-2-img-box">
                    <!-- <img 
                        class="content-2-img" 
                        src="@/assets/avatar/avatar.png" 
                    /> -->
                    <img 
                        class="content-2-img" 
                        :src="dataMsg.of_ex10" 
                        object-fit="fill"
                    />
                </div>
                <div class="content-2-brief_introduction">{{dataMsg.of_ex3}}</div>
            </div>
            <div class="content-3">
                <!-- 视频 -->
                <div class="content-3-brief_introduction">生平视频</div>
                <div class="content-3-video">
                    <video 
                        ref="videoRef" 
                        width="100%" 
                        class="video-class"
                        :src="videoUrl"
                        autoplay
                        muted
                        loop
                        controls
                        @loadedmetadata="onLoadedmetadata"
                        @play="play"
                    >
                    </video>
                </div>
            </div>
        </template>

        <Danmu :messages="messageGift" :messageDuration="15" />
    </div>
</template>

<script lang="ts" setup>
    import Danmu from "@/components/DanMu.vue"; 
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useStore } from '@/store'
    import { useRoute, useRouter } from 'vue-router'
    import { wst } from '@/websocket'
    const store: any = useStore()
    const route: any = useRoute()

    const isHome: Ref<boolean> = ref(false) //是否展示主页，写完改回true
    const messageGift: Ref<any[]> = ref([]) //弹幕
    const dataMsg: Ref<any> = ref({}) //逝者信息
    const imgList: Ref<any> = ref([ //逝者图片
        // new URL('@/assets/avatar/avatar.png', import.meta.url).href,
        // new URL('@/assets/avatar/bg4.png', import.meta.url).href,
    ])
    const imgIndex: Ref<number> = ref(0) //逝者图片索引

    const videoUrl: Ref<any> = ref('') //逝者生平视频 http://vjs.zencdn.net/v/oceans.mp4

    const interval: Ref<any> = ref('')
    
    wst(route.query.hallName, '', (res) => {
        res = JSON.parse(res)
        console.log(res)
        if (res.type == '状态变更') {
            isHome.value = false

            messageGift.value = []
            dataMsg.value = res.data
            imgList.value =  dataMsg.value[0]?.ngm_ex9?.split(',') ? dataMsg.value[0]?.ngm_ex9?.split(',') : []
            videoUrl.value = dataMsg.value[0]?.of_ex4

            if (interval.value) {
                clearInterval(interval.value)
            }
            interval.value = setInterval(() => {
                if (imgList.value.length > (imgIndex.value + 1)) {
                    imgIndex.value++
                } else {
                    imgIndex.value = 0
                }
            }, 5000)
        } else if (res.type == '留言') {
            isHome.value = false
            messageGift.value.push({
                text: res.data.name + res.type + '：' + res.data.content
            })
        } else if (res.type == '开始') {
            isHome.value = false
        } else if (res.type == '结束') {
            isHome.value = true
        }
    })


    

   

    const videoRef: Ref<any> = ref(null)
    const onLoadedmetadata = () => {
        // videoRef.value.play()
        // nextTick(() => {
        //     videoRef.value.muted = false
        //     videoRef.value.play()
        // })
    }
    const play = () => {
        // videoRef.value.muted = false
        // videoRef.value.play()
    }
    onMounted(() => {
        
        
    })
    onBeforeUnmount(() => {
        if (interval.value) {
            clearInterval(interval.value)
        }
    })
</script>

<style lang="scss" scoped>
    .v-enter-active {
        transition: opacity 1s ease;
    }

    .v-enter-from,
    .v-leave-to {
    opacity: 0;
    }
    .content::after {
        content: '';
        position: absolute;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        background-image: url('@/assets/avatar/bg8.png');
        background-size: 100% 100%;
        filter: blur(5px);
    }
    .title {
        width: 100%;
        height: 100%;
        font-size: 120px;
    }
    .content {
        width: 100vw;
        height: 100vh;
        // background-image: url('@/assets/avatar/bg7.png');
        // background-size: 100% 100%;
        overflow: hidden;
        display: flex;
        color: #fff;
        box-sizing: border-box;
        .content-1, .content-2, .content-3 {
            flex: 1;
            box-sizing: border-box;
            padding: 0 1%;
        }
        .content-1 {
            .content-1-img-box {
                box-sizing: border-box;
                padding-top: 5%;
                width: 100%;
                height: 38vw;
                border-radius: 10%;
            }
            .content-1-img {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 0 10%;
                object-fit: fill;
            }
            .content-1-brief_introduction {
                margin-top: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                // padding-top: 40px;
                font-size: 25px;
                text-align: center;
                width: 100%;
                height: 4vw;
                background-image: url('@/assets/img/backgroundFrame.png');
                background-size: 40% 100%;
                background-repeat: no-repeat;
                background-position: 50% 0;
            }
        }
        .content-2 {
            .content-2-title {
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                // padding-top: 40px;
                font-size: 40px;
                text-align: center;
                width: 100%;
                height: 5vw;
                background-image: url('@/assets/img/backgroundFrame.png');
                background-size: 80% 100%;
                background-repeat: no-repeat;
                background-position: 50% 0;
            }
            .content-2-img-box {
                box-sizing: border-box;
                padding-top: 5%;
                width: 100%;
                height: 35vw;
                border-radius: 10%;
            }
            .content-2-img {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 0 10%;
                object-fit: fill;
            }
            .content-2-brief_introduction {
                box-sizing: border-box;
                margin-top: 40px;
                padding: 10px;
                border-radius: 2%;
                font-size: 25px;
                text-indent: 50px;
                text-align: left;

                background-color: rgba(0,0,0,0.5);
            }
        }
        .content-3 {
            .content-3-video {
                box-sizing: border-box;
                padding-top: 5%;
                width: 100%;
                height: 38vw;
                border-radius: 10%;
                .video-class {
                    box-sizing: border-box;
                    padding: 0 10%;
                    height: 100%;
                    border: none;
                }
            }
            .content-3-brief_introduction {
                margin-top: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                // padding-top: 40px;
                font-size: 25px;
                text-align: center;
                width: 100%;
                height: 4vw;
                background-image: url('@/assets/img/backgroundFrame.png');
                background-size: 40% 100%;
                background-repeat: no-repeat;
                background-position: 50% 0;
            }
            
        }
    } 
</style>